﻿@model LuShanTea.Front.Web.Models.GoodListGetModel
@{
    ViewBag.Title = "产品列表";
    Layout = "~/Views/Shared/_UserLayout.cshtml";
}
@section Head{

<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<link href="~/common/Threelinkage/layui/css/layui.css" rel="stylesheet" />
<script src="~/common/Threelinkage/layui/layui.js"></script>
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
<![endif]-->
}



<!--内页样式-->
<div class="Inside_pages">
    <div class="products">
        <!--当前位置（面包屑）-->
        <div class="Location_link">
            <em></em><a href="#">产品中心</a>  &lt;   <a href="#">巴山雀舌</a>
        </div>
        <!--筛选条件样式-->
        <div class="products_Select marginbottom">
            <div class="Filter">
                <div class="Filter_list clearfix">
                    <div class="Filter_title"><span>类型：</span></div>
                    <div class="Filter_Entire"><a href="/Home/List">全部</a></div>
                    <div class="p_f_name" id="selectCategory">
                        @foreach (var category in Model.Categorys)
                        {
                            <a href="#" class="" title="莱家/Loacker" value="@category.Id">@category.Name </a>
                        }


                    </div>
                </div>
                <div class="Filter_list clearfix">
                    <div class="Filter_title"><span>包装方式：</span></div>
                    <div class="Filter_Entire"><a href="/Home/List">全部</a></div>
                    <div class="p_f_name" id="selectPack">
                        @foreach (var pack in Model.Packs)
                        {
                            <a href="#" value="@pack.Id">@pack.Name</a>
                        }


                    </div>
                </div>
                <div class="Filter_list clearfix">
                    <div class="Filter_title"><span>价格：</span></div>
                    <div class="Filter_Entire"><a href="/Home/List">全部</a></div>
                    <div class="p_f_name" id="selectPrice">
                        <a href="#" value="0-50">0-50</a>
                        <a href="#" value="50-150">50-150</a>
                        <a href="#" value="150-500">150-500</a>
                        <a href="#" value="500-1000">500-1000</a>
                        <a href="#" value="1000-0">1000以上</a>
                    </div>
                </div>
            </div>
        </div>

        <!--产品列表列表-->
        <div class="products_list marginbottom">
            <div class="Sorted">
                <div class="Sorted_style" id="selectType">
                    <a href="#" class="on" value="all">综合<i class="icon-angle-down"></i></a>
                    <a href="#" value="sale">销量<i class="icon-angle-down"></i></a>
                    <a href="#" value="price">价格<i class="icon-angle-down"></i></a>
                    <a href="#" value="new">新品<i class="icon-angle-down"></i></a>
                </div>
                <!--页数-->
                <div class="s_Paging">
                    <span> 1/12</span>
                    <a href="#" class="on">&lt;</a>
                    <a href="#">&gt;</a>
                </div>
            </div>
            <!--产品列表样式-->
            <div class="p_list  clearfix">
                <ul id="com">
                    @{
                        for (int i = 0; i < Model.Goods.Length; i++)
                        {
                            var good = Model.Goods[i];
                            var goodImg = Model.GoodImgs[i];
                            var goodComment = Model.GoodComments[i];

                            <li class="gl-item">
                                <div class="Borders">
                                    <div class="img"><a href="/Home/Detail?GoodId=@good.Id"><img width="220" height="220" src="http://static.amortal.top/@goodImg.ImgSrc" style="width:220px;height:220px" /></a></div>
                                    <div class="name"><a href="/Home/Detail?GoodId=@good.Id">【2018年新品】@good.Name</a></div>
                                    <div class="Price">商城价：<b>¥@good.Price</b><span>原价：<em>@good.PrePrice</em></span></div>
                                    <div class="Review">已有<a href="#">@goodComment</a>评论</div>
                                    <div class="p-operate">
                                        <a href="#" class="p-o-btn Collect"><em></em>收藏</a>
                                        <a href="#" class="p-o-btn shop_cart"><em></em>加入购物车</a>
                                    </div>
                                </div>
                            </li>
                        }
                    }


                </ul>

                <!--分页查询-->
                <div style="width:100%;height:50px;text-align:right;">
                    <div class="test1" id="test1" style="width:100%;height:50px;"></div>

                </div>
                <!--原来自带的分页-->

            </div>
        </div>




    </div>
    <!--友情链接-->
    <div class="Links">
        <div class="link_title">友情链接</div>
        <div class="link_address">
            <a href="http://www.jjcyxh.com/">九江市茶叶产业协会</a>  <a href="http://www.ctma.com.cn/index.html">中国茶叶流通协会</a>  <a href="http://www.jxcxh.com.cn/">江西省茶叶协会</a>
            <a href="http://www.gzcx.org/" target="_blank">贵州省茶叶协会</a><a href="http://www.gdtea.com.cn/" target="_blank">广东省茶业行业协会</a><a href="http://www.zjcxw.com.cn/" target="_blank">浙江省茶叶产业协会</a><a href="http://www.hncha.cn/" target="_blank">湖南省茶业协会</a>
        </div>
    </div>
</div>


<style>
    .selectMake {
        width: 50px;
        background-color: lightgrey;
    }
</style>

@section FooterScript{


<script src="~/common/js/template.js"></script>
<script src="~/common/js/axios.min.js"></script>
@*<script src="https://unpkg.com/axios/dist/axios.min.js"></script>*@

<!--js模板-->
<script id="comment_template" type="text/html">
    <%var goodImgs=goodImgs%>
    <%var goodComments=goodComments%>
    <%for (var i = 0; i < data.length; i++) {%>
    <li class="gl-item">
        <div class="Borders">
            <div class="img"><a href="/Home/Detail?GoodId=<%:=data[i].id%>"><img width="220" height="220" src="http://static.amortal.top/<%:=goodImgs[i].imgSrc%>" style="width:220px;height:220px" /></a></div>
            <div class="name"><a href="/Home/Detail?GoodId=<%:=data[i].id%>">【2018年新品】<%:=data[i].name%></a></div>
            <div class="Price">商城价：<b>¥<%:=data[i].price%></b><span>原价：<em><%:=data[i].prePrice%></em></span></div>
            <div class="Review">已有<a href="#"><%:=goodComments[i]%></a>评论</div>
            <div class="p-operate">
                <a href="#" class="p-o-btn Collect"><em></em>收藏</a>
                <a href="#" class="p-o-btn shop_cart"><em></em>加入购物车</a>
            </div>
        </div>
    </li>

    <%}%>

</script>


<!--ajax分页获取数据-->
<script>
    var count = 0; // 商品总数
    var categoryId = 0; // 商品类别id
    var packId = 0; // 包装类型id
    var priceRange = "0-0" // 价格区间
    var orderBy = "all" // 排序规则
    var keyword=""
    $(function () {
        count = parseInt(@ViewBag.goodCount); // 获取该类型商品总数
    categoryId =@Model.CategoryId; // 获取商品类型
            //alert(categoryId)
            //alert(count)
        });
    // 分页获取商品信息
    layui.use('laypage', function () {
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , count: count // 总数
            , groups: 3, // 显示几个页面
            limit: 5 // 每个页面展示几条数据
            , jump: function (obj, first) {
                //得到了当前页，用于向服务端请求对应数据
                var curr = obj.curr; // 获取当前页数下标
                // 这里发送ajax
                //alert(curr);
                if (!first) {
                    axios.post('/Home/List', {
                        categoryId: categoryId,
                        index: curr,
                        orderBy: orderBy,
                        priceRange: priceRange,
                        packId: packId,
                        keyword: keyword
                    })
                        .then(function (response) {
                            var di = document.getElementById("comment_template").innerHTML;
                            var html = template(di, { data: response.data.goods, goodImgs: response.data.goodImgs, goodComments: response.data.goodComments });
                            $("#com").html(html);
                        })
                        .catch(function (error) {
                            alert("error")
                        });
                }

            }
        });
    });
</script>


<script>
    $(function () {
        // 点击不同筛选条件(综合、销量、价格、新品)，给当前选中条件加class="on"
        $(".Sorted_style>a").each(function (res) {
            //alert(res)
            $(this).click(function () {
                //alert(res)
                $(this).attr("class", "on").siblings().attr("class", "")
                //alert($(this).attr("value"))
                orderBy = $(this).attr("value")

                // 发送ajax请求，获取数据
                axios.post('/Home/List', {
                    categoryId: categoryId,
                    index: 1,
                    orderBy: orderBy,
                    priceRange: priceRange,
                    packId: packId
                })
                    .then(function (response) {
                        var di = document.getElementById("comment_template").innerHTML;
                        var html = template(di, { data: response.data.goods, goodImgs: response.data.goodImgs, goodComments: response.data.goodComments });
                        $("#com").html(html);
                    })
                    .catch(function (error) {
                        alert("error")
                    });

            })
        });

        // 获取当前选中商品类型
        $("#selectCategory>a").each(function (res) {
            $(this).click(function () {
                $(this).attr("class", "selectMake").siblings().attr("class", "")
                $(this).parent().prev().children().css("background-color", "white").css("color", "black")
                //alert($(this).attr("value"))
                categoryId = $(this).attr("value")

                // 发送ajax请求，获取数据
                axios.post('/Home/List', {
                    categoryId: categoryId,
                    index: 1,
                    orderBy: orderBy,
                    priceRange: priceRange,
                    packId: packId
                })
                    .then(function (response) {
                        var di = document.getElementById("comment_template").innerHTML;
                        var html = template(di, { data: response.data.goods, goodImgs: response.data.goodImgs, goodComments: response.data.goodComments });
                        $("#com").html(html);
                    })
                    .catch(function (error) {
                        alert("error")
                    });
            })

        });

        // 获取当前选中商品包装类型
        $("#selectPack>a").each(function (res) {
            $(this).click(function () {
                $(this).attr("class", "selectMake").siblings().attr("class", "")
                $(this).parent().prev().children().css("background-color", "white").css("color", "black")
                //alert($(this).attr("value"))
                packId = $(this).attr("value")

                // 发送ajax请求，获取数据
                axios.post('/Home/List', {
                    categoryId: categoryId,
                    index: 1,
                    orderBy: orderBy,
                    priceRange: priceRange,
                    packId: packId
                })
                    .then(function (response) {
                        var di = document.getElementById("comment_template").innerHTML;
                        var html = template(di, { data: response.data.goods, goodImgs: response.data.goodImgs, goodComments: response.data.goodComments });
                        $("#com").html(html);
                    })
                    .catch(function (error) {
                        alert("error")
                    });
            })

        });
        // 获取当前选中商品价格区间
        $("#selectPrice>a").each(function (res) {
            $(this).click(function () {
                $(this).attr("class", "selectMake").siblings().attr("class", "")
                $(this).parent().prev().children().css("background-color", "white").css("color", "black")
                //alert($(this).attr("value"))
                priceRange = $(this).attr("value")

                // 发送ajax请求，获取数据
                axios.post('/Home/List', {
                    categoryId: categoryId,
                    index: 1,
                    orderBy: orderBy,
                    priceRange: priceRange
                })
                    .then(function (response) {
                        var di = document.getElementById("comment_template").innerHTML;
                        var html = template(di, { data: response.data.goods, goodImgs: response.data.goodImgs, goodComments: response.data.goodComments });
                        $("#com").html(html);
                    })
                    .catch(function (error) {
                        alert("error")
                    });
            })

        });

        // 当点击全部的时候
        $(".Filter_Entire").each(function (res) {
            $(this).click(function () {
                //$(this).css("background-color", "gray").css("color", "white"))
                //$(this).css("background-color", "gray").css("color", "white")

            })

        })

        // 搜索商品
        $("#Search_btn").click(function () {
            keyword = $("#keyword").val()
           
            $("#keyword").val("") // 清空搜索框
            // 发送ajax请求，获取数据
            axios.post('/Home/List', {
                //categoryId: categoryId,
                index: 1,
                keyword: keyword,
                //orderBy: orderBy,
                //priceRange: priceRange
            })
                .then(function (response) {
                    var di = document.getElementById("comment_template").innerHTML;
                    var html = template(di, { data: response.data.goods, goodImgs: response.data.goodImgs, goodComments: response.data.goodComments });
                    $("#com").html(html);
                })
                .catch(function (error) {
                    alert("error")
                });
        })
    })
</script>
}

